<template>
    <!-- 办事指南 -->
    <div class="app-guide">
        <div class="guideTop">
            <div class="guideTopLeft">
                <!-- <img src="@/assets/images/beian/logo.png" /> -->
                <span>冀建筑垃圾管理与服务平台</span>
                <!-- <span>冀建筑垃圾处理备案系统</span> -->
            </div>
            <div class="guideTopRight">
                <!-- <span class="guideTopRightTag">首页</span>
                <span class="guideTopRightTag">常见问题</span> -->
                <el-button type="primary" size="mini" @click="toLogin" style="background-color: #235dc8; border-color: #fff;"> 登录/注册 </el-button>
            </div>
        </div>
        <div class="guideDesc">
            <div class="guideDescTitle">建筑垃圾处理方案备案流程</div>
            <div class="guideDescSubtitle">为规范建筑垃圾处理管理工作，提高审批效率，特制定本操作指南。请按照流程指引完成备案流程</div>
        </div>
        <el-row>
            <el-col :span="10">
                <div class="guideProcess">
            <div class="guideProcessTitle"> 备案申请流程 </div>
            <!-- <div class="recordTopContent"> 
                <div>1.信息填写资料上传</div>
                <div>2.信息审核</div>
                <div>3.信息整改</div>
            </div> -->
            <img style="width: 100%; height: 500px;" src="@/assets/images/beian/process.png" />
            <el-steps v-show="false" :active="1" simple>
                <!-- <div > -->
                    <el-step v-for="(item, i) in processList" :key="i" :title="item.name" icon="el-icon-edit"></el-step>
                <!-- </div> -->
                <!-- <el-step title="步骤 2" icon="el-icon-upload"></el-step>
                <el-step title="步骤 3" icon="el-icon-picture"></el-step> -->
            </el-steps>

        </div>
            </el-col>
            <el-col :span="14">
                <div class="guideFile">
            <div class="guideFileTitle"> 相关模板下载 </div>
            <div class="guideFileContent"> 
                <div class="guideFileList" v-for="(item, index) in fileList" :key="index">
                    <div class="guideFileListLift" >
                        <div class="fileModelLogo"><img src="@/assets/images/beian/pdf.png" /></div>
                        <div class="fileModeCon">
                            <div class="fileModelName"> {{item.name}}</div>
                            <div class="fileModelInfo">文件大小： {{item.size}}</div>
                            <div class="fileModelInfo">更新时间： {{item.updateTime}} </div>
                        </div>
                    </div>
                    <div class="guideFileListRight" >
                        <el-button type="primary" class="" @click="download(item)"><i class="el-icon-download"></i>下载</el-button>
                    </div>
                </div>
            </div>
        </div>
            </el-col>
        
        
    </el-row>
        <div class="guideNotice">
            <div class="guideNoticeTitle"><span><i class="el-icon-warning"></i></span>办事注意事项</div>
            <div class="guideNoticeCon"><span><i class="el-icon-success"></i></span>请确保填写的所有信息真实准确，如有虚假将承担相应法律责任</div>
            <div class="guideNoticeCon"><span><i class="el-icon-success"></i></span>建筑垃圾处理方案备案申请表必须加盖单位公章</div>
            <div class="guideNoticeCon"><span><i class="el-icon-success"></i></span>相关证明文件请提供清晰的原件扫描件或照片</div>
            <div class="guideNoticeCon"><span><i class="el-icon-success"></i></span>运输公司必须具备相应的经营许可证和备案证明</div>
            <div class="guideNoticeCon"><span><i class="el-icon-success"></i></span>消纳场所应当是经过相关部门批准的合法场所</div>
        </div>
  
    </div>
  </template>
  
  <script>
  export default {
    name: "Record",
    components: {  },
    data() {
      return {
        fileList: [{
            name: "建筑垃圾处理方案备案申请表",
            size: "258KB",
            updateTime: "2024-01-01",
            url: ""
        },{
            name: "建筑垃圾处理方案范文",
            size: "258KB",
            updateTime: "2024-01-01",
            url: ""
        },{
            name: "其他",
            size: "258KB",
            updateTime: "2024-01-01",
            url: ""
        }],
        processList: [{
            id: 1,
            name: "用户注册",
        }, {
            id: 2,
            name: "项目基础信息",
        }, {
            id: 3,
            name: "施工单位信息",
        }, {
            id: 4,
            name: "建设单位信息",
        }, {
            id: 5,
            name: "垃圾排放处置信息",
        }, {
            id: 6,
            name: "运输公司信息",
        }, {
            id: 7,
            name: "消纳处置单位信息",
        }, {
            id: 8,
            name: "相关证件",
        }]
      };
    },
    created() {
    },
    methods: {
        toLogin(){
            const url = window.location.origin
            window.open(url, '_blank');
            // this.$router.push({path: '/login'})
        },
        download(val){
            console.log(val, 'val')
        }
    }
  };
  </script>
  
  <style scoped lang="scss" >
    .app-guide{
        padding-bottom: 20px;
        .guideTop{
            width: 100%;
            height: 64px;
            display: flex;
            padding: 20px;
            justify-content: space-between;
            align-items: center;

            font-size: 24px;
            font-weight: bold;
            line-height: 28px;
            // color: #fff;
            // background-color: #235dc8;

            .guideTopLeft{
                display: flex;
                img{
                    width: 80px;
                    height: 32px;
                    margin-right: 10px;
                }
            }
            .guideTopRight{
                .guideTopRightTag{
                    display: inline-block;
                    padding: 0 10px;
                    margin-right: 30px;
                    font-size: 16px;
                }

            }
        }
        .guideDesc{
            width: 100%;
            min-height: 240px;

            display: flex;
            flex-direction: row;
            padding: 0px 24px;
            gap: 0px 0px;
            flex-wrap: wrap;
            background-image: linear-gradient(to right, #354e96, #f8f9fa);
            color: #fff;

            flex-direction: column;
            justify-content: center;
            align-content: flex-start;
            align-items: flex-start;

            .guideDescTitle{
                font-size: 24px;
            }
            .guideDescSubtitle{
                font-size: 14px;
                margin-top: 10px;
                max-width: 50%;
            }
        }
        .guideProcess{
            padding: 25px;
            .guideProcessTitle{
                width: 100%;
                height: 50px;
                line-height: 50px;
                font-size: 24px;
                font-weight: bold;
                // text-align: center;
                color: #000000;
            }
        }
        .guideFile{
            padding: 25px;
            .guideFileTitle{
                font-size: 24px;
                font-weight: bold;
                line-height: 32px;
                padding: 10px 0;
            }
            .guideFileContent{
                display: flex;
                flex-wrap: wrap;
                .guideFileList{
                    margin: 10px;
                    min-width: 500px;
                    border-radius: 8px;
                    opacity: 1;

                    /* 自动布局 */
                    display: flex;
                    padding: 24px;
                    align-content: flex-start;
                    justify-content: space-between;

                    border: 1px solid #E5E7EB;
                    .guideFileListLift{
                        display: flex;
                        flex-direction: row;
                        .fileModelLogo{
                            margin: 10px;
                            img{
                                width: 30px;
                                height: 30px;

                            }
                        }
                        .fileModeCon{
                            font-size: 14px;
                            font-weight: normal;
                            color: #6B7280;
                            .fileModelName{
                                font-size: 18px;
                                font-weight: 500;
                                color: #000000;
                                padding: 5px 0;
                            }
                            .fileModelInfo{
                                padding: 5px 0;
                            }
                        }
                    }
                    .guideFileListRight{

                    }
                }
            }
        }
        .guideNotice{
            margin: 25px;
            min-height: 260px;
            border-radius: 0px 8px 8px 0px;
            /* 自动布局 */
            display: flex;
            padding: 24px;
            gap: 0px 10px;
            flex-wrap: wrap;
            flex-direction: column;
            background: #FEFCE8;
            box-sizing: border-box;
            border-width: 0px 0px 0px 4px;
            border-style: solid;
            border-color: #FACC15;
            z-index: 0;
            .guideNoticeTitle{
                font-size: 24px;
                padding: 10px 0;
                .el-icon-warning{
                    margin-right: 5px;
                    color: #eab308;
                }
            }
            .guideNoticeCon{
                font-size: 14px;
                padding: 6px 0;
                .el-icon-success{
                    margin-right: 5px;
                    color: #22c55e;
                }
            }
        }
    }
  </style>